<template>
  <div class="comment-item">
    <van-cell>
      <template #title>
        <!-- 用户信息 -->
        <div class="user-info">
          <!-- 通过 userReply.avatar 获取到头像地址访问不到 -->
          <img :src="userReply?.avatar" alt="">
          <span class="user-name" v-text="userReply?.nickname"></span>
          <van-rate v-model="star" readonly />
        </div>
        <!-- 评论时间和商品规格 -->
        <div class="time">{{ userReply?.add_time + userReply?.suk}}</div>
        <!-- 用户评价的文字内容 -->
        <p class="comment-text" v-text="userReply?.comment"></p>
        <!-- 用户评价的图片展示 -->
        <van-grid :border="false" :column-num="4" :gutter="10">
          <van-grid-item v-for="(item, index) in pics" :key="index">
            <van-image
              src="item"
            />
          </van-grid-item>
        </van-grid>
      </template>
    </van-cell>
  </div>

</template>
<script setup>
import { computed } from 'vue'

// 接收父组件传递过来的用户评价信息
const { userReply } = defineProps({
  userReply: {
    type: Object,
    require: true
  }
})
// <van-rate v-model="star" readonly /> v-model 值必须是数字
const star = computed(() => Number(userReply?.star))
// 获取保存评论图片的数组
const pics = computed(() => userReply?.pics)
</script>
<style lang='scss' scoped>
  .comment-item {
    // 用户信息
    .user-info {
      display: flex;
      align-items: center;
      img {
        width: 28px;
        height: 28px;
      }
      span {
        font-size: 14px;
        margin: 0 10px;
      }
    }
    // 评价时间和商品规格
    .time {
      font-size: 12px;
      color: #82848F;
      padding: 8px 0;
    }
    // 评价文字
    .comment-text {
      font-size: 14px;
      line-height: 1.2;
    }
    // 评价图片
    .van-grid {
      padding-left: 0!important;
    }
  }
</style>
